<template>
	<view class="mainCon">
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="委托号">
					<u-input v-model="formData.wtno" />
				</u-form-item>
				<u-form-item label="箱号">
					<u-input v-model="formData.xh" />
				</u-form-item> 
				<!-- <u-form-item label="作业方式" label-width="160">
					<u-input type="select" :select-open="workwayShow" v-model="formData.workway.label"
						placeholder="请选择作业方式" @click="workwayShow = true"></u-input>
				</u-form-item> -->
				<u-form-item label="二级分发">
					<u-radio-group v-model="formData.isFenfa" @change="onradioChange">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<template v-if="formData.isFenfa=='否'">
					<u-form-item label="车号" label-width="160">
						<u-input type="select" :select-open="carCodeShow" v-model="formData.carCode.label"
							placeholder="请选择车号" @click="carCodeShow = true"></u-input>
					</u-form-item>
					<u-form-item label="手机号">
						<u-input v-model="formData.phone" type="number" />
					</u-form-item>
				</template>

				<u-form-item v-if="formData.isFenfa=='是'" label="物流车队" label-width="160">
					<u-input type="select" :select-open="expresShow" v-model="formData.express.label"
						placeholder="请选择物流车队" @click="expresShow = true"></u-input>
				</u-form-item>

				
			</u-form>

			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapSelAll">全选</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapSubmit">提交</u-button>
			</view>
		</view>
		<view style="height: 500rpx;">

		</view>
		<view class="empty" style="margin-top: 50rpx;" v-if="list.length==0">
			<u-empty text="暂无相关数据" mode="list"></u-empty>
		</view>
		<view class="listCon">
			<view class="listItem" v-for="(item, index) in list" :key="index">
				  
					<view class="infoCon" @click="selectitem(item)">
						<view class="checkBox">
							<u-checkbox v-model="item.checked"></u-checkbox>
						</view> 
						<view>
							<view class="cellItem">
								<view class="label">
									提单号：
								</view>
								<view class="value">
									{{item.TIDANNO}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									委托号/序号：
								</view>
								<view class="value">
									{{item.WTNO}}  /  {{item.TIDANXH}}
								</view>
							</view> 
							<view class="cellItem">
								<view class="label">
									作业方式：
								</view>
								<view class="value">
									<template v-if="item.WORKWAY=='FOEI'">
										重出空回
									</template>
									<template v-if="item.WORKWAY=='EOFI'">
										空出重回
									</template>
									<template v-if="item.WORKWAY=='EOEI'">
										空出空回
									</template>
									<template v-if="item.WORKWAY=='EITC'">
										空进
									</template>
									<template v-if="item.WORKWAY=='FINO'">
										重进
									</template>
									<template v-if="item.WORKWAY=='FONI'">
										重出
									</template>
									<template v-if="item.WORKWAY=='EONI'">
										空出
									</template>
								</view>
							</view>
							
							<view class="cellItem">
								<view class="label">
									箱号：
								</view>
								<view class="labelTag">
									{{item.XH}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									箱尺：
								</view>
								<view class="value">
									{{item.XC}}{{item.XX}}
								</view>
							</view>
							<view class="cellItem">
								<view class="label">
									箱主：
								</view>
								<view class="value">
									{{item.XGS}}
								</view>
							</view>
						</view> 
					</view>
			 
			</view>
		</view>
		<u-select mode="single-column" :list="workwayList" v-model="workwayShow" @confirm="workwayConfirm"
			value-name="WORK_WAY" label-name="NAME"></u-select>
		<u-select mode="single-column" :list="carCodeList" v-model="carCodeShow" @confirm="carCodeConfirm"
			value-name="TRUCKER_NO" label-name="PLAT_NO"></u-select>

		<u-select mode="single-column" :list="expressList" v-model="expresShow" @confirm="expressConfirm"
			value-name="WLGS" label-name="WLGS"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
				},
				radioList: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				formData: {
					isFenfa: '否',
					xh:'',
					wtno: '',
					phone: '',
					workway: {
						label: '',
						value: ''
					},
					carCode: {
						label: '',
						value: ''
					},
					express: {
						label: '',
						value: ''
					}
				},
				workwayShow: false,
				workwayList: [],
				carCodeShow: false,
				carCodeList: [],
				expressList: [],
				truckname: uni.getStorageSync("nickName"),
				list: [],
				isCheckAll: false,
				expresShow: false,
				flag: false
			};
		},
		onLoad() {
			this.getOptions()
		},
		methods: {
			getOptions() {
				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/DpvWhKKMGBMIhEN?truckname=' + this.truckname,
					method: "get",
					success: (res) => {
						this.carCodeList = res.data.rows
					}
				})

				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/HYvkUiHz7ba8zWZ',
					method: "get",
					success: (res) => {
						this.workwayList = res.data.rows
					}
				})


				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/m6Q6ZYmpLP7fYgR',
					method: "get",
					success: (res) => {
						this.expressList = res.data.rows
					}
				}) 
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
					uni.request({
						url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/YYPew4y2NLmKGvt?truckname=' + this
							.truckname +
							'&xh='+this.formData.xh+'&wtno=' + this.formData.wtno + '&tidanno=&workway=&tel=&carcode=' + this.formData.carCode.label,
						method: "get",
						success: (res) => {
							this.isCheckAll = false
							res.data.rows.forEach((item) => {
								item.checked = false
							})
							this.list = res.data.rows
							 uni.hideLoading()
						}
					});
			}, 
			workwayConfirm(e) {
				this.formData.workway = e[0]
			},
			carCodeConfirm(e) {
				this.formData.carCode = e[0]
				this.formData.phone = e[0].value
			},
			expressConfirm(e) {
				this.formData.express = e[0]
				// this.truckname = e[0].value
			},
			onSearch() {
				this.getList()
			},
			selectitem(item) {
				if (item.checked == false) {
					item.checked = true
				} else {
					item.checked = false
				}
			},
			tapSelAll() {
				if (this.isCheckAll) {
					this.list.forEach((item) => {
						item.checked = false
					})
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
					this.list.forEach((item) => {
						item.checked = true
					})
				}
			},
			onradioChange(e) {
				if (e == '是') {
					//this.list = []
				} else {
					// this.truckname = uni.getStorageSync("nickName")
					// this.getList()
				}
			},
			tapSubmit() {
				if (this.flag) return
				let checkList = []
				this.list.forEach((item) => {
					if (item.checked && this.formData.isFenfa == '是') {
						checkList.push({
							workway:"1",
							zhipaipeoper: this.truckname,
							agencycompany: this.formData.express.label,
							id: item.ID
						})
					}

					if (item.checked && this.formData.isFenfa == '否') {
						checkList.push({
							workway:"1",
							carcode: this.formData.carCode.label,
							zhipaipeoper: this.truckname,
							truckerno: this.formData.phone,
							id: item.ID
						})
					}
				})

				if (checkList.length == 0 || this.list.length == 0) return uni.showToast({
					title: '请选择数据',
					icon: 'none'
				})

				if (this.formData.isFenfa == '否' && (this.formData.carCode.label == '' || this.formData.phone == ''))
					return uni.showToast({
						title: '请选择车号和手机号',
						icon: 'none'
					})

				this.flag = true
				if(this.formData.isFenfa == '是'){
					if(this.formData.express.label==''){
						this.flag = false
						return uni.showToast({
							title: '请选择物流车队',
							icon: 'none'
						})
					}
					uni.request({
						url: 'https://api.zlkj-port.com/szgjapi/zlzg/A/LcZD7SeNHNhZIge',
						data: {
							List: JSON.stringify(checkList)
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: "POST",
						success: (res) => {
							this.flag = false
							uni.showToast({
								title: '提交成功'
							})  
							setTimeout( () => {
							   this.getList()
							}, 1000)
						},
						fail() {
							this.flag = false
						}
					})
					
				}else{
					uni.request({
						url: 'https://api.zlkj-port.com/szgjapi/zlzg/A/1MhkWICoMINxg4p',
						data: {
							List: JSON.stringify(checkList)
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: "POST",
						success: (res) => {
							this.flag = false
							uni.showToast({
								title: '提交成功'
							}) 
							setTimeout( () => {
							   this.getList()
							}, 1000)
						},
						fail() {
							this.flag = false
						}
					})
				}
				
			}  
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}
	page {
		background-color: #F2F1F9;
	}
	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
	}

	.listCon {

		.listItem {
			margin-left:10px;
			padding: 20rpx;
			border-bottom: 1px solid $u-border-color;
			display: flex;
			align-items: center;

			

			.infoCon {
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				.cellItem {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.label {}
				}
				.labelTag {
					background-color: #E0EDFB;
					color: #4C86E7; 
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}
				.checkBox {}
			}
		}
	}
</style>
